<template>
  <div>
    <el-card class="combomeal top">
      <p class="title">选择背调套餐</p>
      <p class="type">线上套餐</p>
      <div class="box-group">
        <div class="box-card" v-for="(i, index) in cardList" :key="index" @click="selectClick(i.id)"
          :class="{ active: selectIndex === i.id }" :style="{
            border: i.checked ? '1px solid #767688' : '',
          }">
          <img v-if="i.checked" style="float: right" src="@/assets/bt_img/checked.png" />
          <div class="box">
            <div style="display: flex; flex-direction: row">
              <img src="@/assets/bt_img/校招.png" style="width: 25px; height: 25px" />
              <span class="package-name">{{ i.name }}</span>
            </div>
            <div class="list">
              <div v-for="(o, index) in i.sysSurveyVOS" :key="index" class="box-content">
                <p class="item-name">{{ o.name }}</p>
                <p class="item-name amount">x {{ o.num }}</p>
              </div>
            </div>
            <div class="box-footer" :class="{ red: i.checked }">
              ￥{{ i.price }}
            </div>
          </div>
        </div>
      </div>
      <p class="type">线下套餐</p>
      <div class="box-group">
        <div class="box-card" v-for="(i, index) in cardList2" :key="index" @click="selectClick2(i.id)"
          :class="{ active: selectIndex === i.id }" :style="{
            border: i.checked ? '1px solid #767688' : '',
          }">
          <img v-if="i.checked" style="float: right" src="@/assets/bt_img/checked.png" />
          <div class="box">
            <div style="display: flex; flex-direction: row">
              <img src="@/assets/bt_img/校招.png" style="width: 25px; height: 25px" />
              <span class="package-name">{{ i.name }}</span>
            </div>
            <div class="list">
              <div v-for="(o, index) in i.sysSurveyVOS" :key="index" class="box-content">
                <p class="item-name">{{ o.name }}</p>
                <p class="item-name amount">x {{ o.num }}</p>
              </div>
            </div>
            <div class="box-footer" :class="{ red: i.checked }">
              ￥{{ i.price }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="combomeal candidate">
      <p class="title">候选人信息</p>
      <div style="
          width: 100%;
          display: flex;
          align-self: center;
          justify-content: center;
        ">
        <el-form :rules="rules" style="width: 40%" ref="form" :model="form" label-width="150px" label-position="left">
          <el-form-item label="授权方式"> 短信/邮件授权 </el-form-item>
          <el-form-item label="背调人数" prop="type">
            <el-radio-group v-model="form.type" @change="typeChange">
              <el-radio label="1">单人背调</el-radio>
              <el-radio label="2">批量背调</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-show="showSolo">
            <el-form-item label="候选人姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请填写候选人真实姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form.phone" maxlength="11" clearable
                oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请填写候选人手机号"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：" prop="card">
              <el-input v-model="form.card" placeholder="请填写候选人身份证号" clearable></el-input>
            </el-form-item>
            <!-- //QueryType  0不包含学历査询和学位查询 1 仅包含学历査询 2 仅包含学位查询 3包含学历査询学位查询 -->
            <el-form-item v-if="this.selectqueryType == 1 || this.selectqueryType == 3" label="学历编号：" prop="cerNo">
              <el-input v-model="form.cerNo" placeholder="请填写学历编号" clearable></el-input>
            </el-form-item>
            <el-form-item v-if="this.selectqueryType == 2 || this.selectqueryType == 3" label="学位编号："
              prop="degreeCerNo">
              <el-input v-model="form.degreeCerNo" placeholder="请填写学位编号" clearable></el-input>
            </el-form-item>
          </div>
          <div v-show="!showSolo">
            <el-form-item label="候选人上传模版">
              <div class="text-wrapper_16 flex-col" @click="download">
                <el-button type="primary" size="mini"> 下载模版</el-button>
              </div>
            </el-form-item>
            <el-form-item label="候选人名单">
              <el-upload v-show="Isupload" action="#" :file-list="fileList" drag class="upload-demo" :limit="1"
                :auto-upload="false" :before-upload="changeupload" :on-change="handleChange"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" accept=".xls,.xlsx">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__text">
                  只能上传xls,xlsx文件,最大支持1000条数据
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <div class='uploadBox' v-if="Issuccess">
                <div class="info"><span style="margin-right: 10px;">{{ this.fileList[0].name }}</span><i
                    class="el-icon-delete" @click="handledelet"></i></div>
                <div class="uploadsuccess">
                  <i class="el-icon-success" style="font-size: 48px;color:#30c25c"></i>
                  <p>成功</p>
                  <p>成功导入{{ this.successList.length }}条数据</p>
                </div>
              </div>
              <div class='uploadBox' v-if="Isfail">
                <div class="info"><span style="margin-right: 10px;">{{ this.fileList[0].name }}</span><i
                    class="el-icon-delete" @click="handledelet"></i></div>
                <div class="uploadsuccess">
                  <i class="el-icon-error" style="font-size: 48px; "></i>
                  <p style="color: red;">校验未通过</p>
                  <p v-for="(item, index) in failList" :key="index">{{ item }}</p>
                  <el-button type="primary" size="mini" @click="handledelet">重新上传</el-button>
                </div>

              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card class="combomeal">
      <div class="footerb">
        <div class="text-wrapper_18">
          <span class="text_95">服务费用：</span>
          <span class="text_96">￥{{ selectAmount }}</span>
        </div>
        <div style="flex: 1; text-align: right">
          <el-button type="primary" @click="onSubmit()">支付</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getListMore } from "@/api/packages/packageManage";
import { submitSinglBack, getTemplate, getUserInfos } from "@/api/BackgroundCheck/BackgroundCheck.js";
export default {
  name: "",
  data() {
    // 身份证验证
    var checkIDCard = (rule, value, callback) => {
      const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
      // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (value) {
        if (IDCardReg.test(value)) {
          callback()
        } else {
          callback(new Error('身份证号格式不正确'))
        }
      } else {
        callback(new Error('请输入身份证号'))
      }
    }
    var checkPhone = (rule, value, callback) => {
      // 手机号验证
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3456789]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    return {
      // 学历显示
      selectqueryType: 0,
      // 上传显示
      Isupload: true,
      // 上传成功显示
      Issuccess: false,
      // 上传失败显示
      Isfail: false,
      // 失败列表
      failList: [],
      // 成功列表
      successList: [],
      cardList: [
      ],
      selectIndex: null,
      selectAmount: null,
      oneAmount: null,
      cardList2: [
      ],
      form: {
        type: "1",
        name: "",
        phone: "",
        idcard: "",
      },
      showSolo: true,
      fileList: [

      ],
      rules: {
        userName: [{ required: true, message: "请输入候选人姓名", trigger: "blur" }],
        cerNo: [{ required: true, message: "请输入学历证号", trigger: "blur" }],
        degreeCerNo: [{ required: true, message: "请输入学位证号", trigger: "blur" }],
        phone: [{ required: true, message: "请填写候选人手机号", trigger: "blur" },
        { validator: checkPhone, trigger: ["blur", "change"] },
        ],
        card: [
          { required: true, message: "请填写候选人身份证号", trigger: "blur" },
          { required: false, validator: checkIDCard, trigger: 'blur' }
        ],
        type: [
          { required: true, message: "请选择背调人数", trigger: "change" },
        ],
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    this.getCardlist();
  },
  methods: {
    // 套餐列表
    async getCardlist() {
      const res1 = await getListMore('1');
      this.cardList2 = res1.data;
      const res2 = await getListMore('0');
      this.cardList = res2.data;
    },
    // 点击卡片
    selectClick(id) {
      this.selectqueryType = 0
      this.cardList.forEach((item, i) => {
        if (item.id != id) {
          item.checked = false
        } else {
          item.checked = !item.checked
          if (item.checked) {
            this.selectIndex = id;
            if (this.form.type == '2') {
              this.selectAmount = parseFloat((item.price * this.successList.length).toFixed(2));
            } else {
              this.selectAmount = item.price;
            }
            this.oneAmount = item.price;
            this.selectqueryType = item.queryType
          } else {
            this.selectIndex = null
            this.selectAmount = null
            this.oneAmount = null
          }
        }
      })
      this.cardList2.forEach((item) => {
        item.checked = false
      })
    },
    // 点击卡片
    selectClick2(id) {
      this.selectqueryType = 0
      this.cardList.forEach((item, i) => {
        item.checked = false
      })
      this.cardList2.forEach((item, i) => {
        if (item.id != id) {
          item.checked = false
        } else {
          item.checked = !item.checked
          if (item.checked) {
            this.selectIndex = id;
            if (this.form.type == '2') {
              this.selectAmount = parseFloat((item.price * this.successList.length).toFixed(2));
            } else {
              this.selectAmount = item.price;
            }
            this.oneAmount = item.price;
            this.selectqueryType = item.queryType
          } else {
            this.selectIndex = null
            this.selectAmount = null
            this.oneAmount = null
          }
        }
      })

    },
    // 支付
    onSubmit() {
      if (this.form.type == '1') {
        // 单人背调
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 套餐是否选择
            if (this.selectIndex != null) {
              let subform = {
                packageId: this.selectIndex,
                amount: this.selectAmount,
                authorizedType: 1,
                type: 0,
                peopleNum: 1,
                userName: this.form.userName,
                phone: this.form.phone,
                card: this.form.card,
              }
              if (this.selectqueryType == 1 || this.selectqueryType == 3) {
                subform.cerNo = this.form.cerNo
              }
              if (this.selectqueryType == 2 || this.selectqueryType == 3) {
                subform.degreeCerNo = this.form.degreeCerNo
              }
              submitSinglBack(subform).then(res => {
                this.$router.replace({ path: '/BackgroundCheck/Payment', query: { array: res.data } });
              });

            } else {
              this.$message.error('请先选择套餐！');
            }
          } else {
            return false;
          }
        });

      } else {
        // 批量背调
        // 套餐是否选择
        if (this.selectIndex != null) {
          let subform = {
            packageId: this.selectIndex,
            amount: this.selectAmount,
            authorizedType: 1,
            type: 1,
            peopleNum: this.successList.length,
            userInfos: this.successList
          }
          submitSinglBack(subform).then(res => {
            this.$router.replace({ path: '/BackgroundCheck/Payment', query: { array: res.data } });
          });

        } else {
          this.$message.error('请先选择套餐！');
        }

      }
    },
    // 下载模版
    download() {
      getTemplate(
      )
        .then((res) => {
          const url = URL.createObjectURL(new Blob([res]))
          const a = document.createElement('a');
          a.href = url;
          a.download = '批量订单上传模板.xlsx';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        })
        .catch(error => {
          // 处理请求错误
          console.error('下载失败:', error);
        });
    },
    // 背调人数类型选择变化
    typeChange(val) {
      this.showSolo = val === "1" ? true : false;
      this.selectAmount = val === "1" ? this.oneAmount : this.oneAmount * this.successList.length;
    },
    changeupload(file) {
    },
    // 上传模板
    handleChange(file, fileList) {
      let formData = new FormData();
      formData.append('file', file.raw);
      getUserInfos(formData)
        .then(response => {
          // 成功
          this.fileList[0] = file
          this.$set(this, 'Issuccess', true)
          this.$set(this, 'Isupload', false)
          this.successList = response.data
          this.selectAmount = parseFloat((this.oneAmount * this.successList.length).toFixed(2))
        })
        .catch((error) => {
          // 失败
          this.fileList[0] = file
          this.$set(this, 'Isfail', true)
          this.$set(this, 'Isupload', false)
          this.failList = error[1].data
        });
    },
    handleRemove(file, fileList) {

    },
    // 删除
    handledelet() {
      this.Issuccess = false
      this.Isfail = false
      this.Isupload = true
      this.fileList = []
      this.failList = []
      this.successList = []
      this.selectAmount = this.oneAmount
    },

    handlePictureCardPreview(file, fileList) {

    },
  },
};
</script>

<style lang="scss" scoped>
.combomeal {
  margin: 16px 18px;


  .title {
    margin-left: 0;
    width: 109px;
    height: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #1f232b;
  }

  .type {
    margin-left: 95px;
    margin-top: 20px;
    width: 57px;
    height: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }

  .title {
    color: #333;
  }

  .box-group {
    margin-left: 75px;
    display: flex;
    flex-wrap: wrap;

    .box {
      width: 250px;
      height: 200px;
      margin: 20px;

      .package-name {
        width: 295px;
        height: 17px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #1f232b;
        margin-left: 5px;
      }

      .list {
        margin-top: 20px;
        height: 175px;
        overflow-y: auto;
        .box-content {
          display: flex;

          .item-name {
            width: 245px;
            height: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
          }

          .amount {
            margin-left: auto;
            /* 这将使.amount靠右 */
            text-align: right;
            /* 确保文本也靠右对齐 */
          }
        }
      }

      .box-footer {
        width: 90px;
        height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        margin-top: 15px;
      }

      .red {
        color: #b41919;
      }
    }

    .box-card {
      width: 295px;
      height: 283px;
      border-radius: 5px;
      border: 1px solid #dcdcdc;
      margin: 20px;
      position: relative;
      cursor: pointer;

      .img {
        position: absolute;
        transform: translateY(15px);
      }

      .text {
        font-size: 14px;
      }

      .item {
        margin-bottom: 18px;
      }

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }

      .clearfix:after {
        clear: both;
      }
    }
  }

  .uploadBox {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 360px;
    height: 200px;
    text-align: center;
    cursor: pointer;
    overflow-y: auto;
    position: relative;

    .info {
      position: absolute;
      top: 0;
      right: 8px;
      color: #409eff;
    }

    .uploadsuccess {
      width: 100%;
      margin-top: 30px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      p {
        margin: 0;
      }
    }
  }

  .active {
    border: 1px solid #535e83;
  }

  .candidate {
    .el-form {
      width: 320px;
      margin: 10px auto;

      .el-input {
        width: 292px;
      }

      .text-wrapper_16 {
        background-color: rgba(83, 94, 131, 1);
        border-radius: 4px;
        height: 36px;
        margin-left: 37px;
        width: 78px;
      }
    }
  }

  .footerb {
    display: flex;
    justify-content: space-between;

    .text-wrapper_18 {
      height: 15px;
      display: flex;
      line-height: 36px;
    }

    .text_95 {
      color: rgba(31, 35, 43, 1);
      font-size: 14px;
      font-weight: normal;
      white-space: nowrap;
    }

    .text_96 {
      margin-right: 5px;
      font-weight: 700;
      overflow-wrap: break-word;
      color: rgba(214, 75, 36, 1);
      font-size: 22px;
      white-space: nowrap;
    }

    .el-button {
      background-color: rgba(83, 94, 131, 1);
      border-radius: 4px;
      height: 36px;
      width: 78px;
    }
  }
}


</style>
